<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/14
  Time: 11:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--解析表达式--%>
<%@ page isELIgnored="false" %>
<%--引入jstl--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--引入springMVC form--%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set var="stateRecord" value="${stateRecord}"/>

<html>
<head>
    <title>考勤一览</title>
    <!-- Basic -->
    <meta charset="UTF-8"/>
    <title>home</title>
    <!--图表需要导入的css-->
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/dist/backEnd/css/chart/index.css" />
    <!--弹出框需要导入的css-->
     <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/dist/backEnd/css/popup/common.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/jquery-2.1.1.min.js"></script>


    <script type="application/javascript">




        window.onload=function () {


           var recordIsNull="${recordIsNull}";

           if(recordIsNull == "recordIsNull"){
               document.getElementById("echartDiv").style.visibility="hidden";
               document.getElementById("nullDate").style.visibility="visible";
           }

           var yearsIsNull="${yearsIsNull}";
           if(yearsIsNull == "yearsIsNull") {
               document.getElementById("yearsechartDiv").style.visibility="hidden";
               document.getElementById("yearsNullDate").style.visibility="visible";
           }
        }


        //返回主页
        function returnMain() {
            window.location.href = "${pageContext.request.contextPath}/XzEmp/selEmpAll.emp";
        }


        var stateRecord = new Array();
       stateRecord = "${StateRecord}".replace('[','').replace(']','').split(',');
       var stateOneList=new Array();
        stateOneList = "${stateOneList}".replace('[','').replace(']','').split(',');
        var stateTwoList=new Array();
        stateTwoList = "${stateTwoList}".replace('[','').replace(']','').split(',');
        var stateThreeList=new Array();
        stateThreeList = "${stateThreeList}".replace('[','').replace(']','').split(',');
        var stateFourList=new Array();
        stateFourList = "${stateFourList}".replace('[','').replace(']','').split(',');
        var stateFiveList=new Array();
        stateFiveList = "${stateFiveList}".replace('[','').replace(']','').split(',');


//       弹出框开始
        var w,h,className;
        function getSrceenWH(){
            w = $(window).width();
            h = $(window).height();
            $('#dialogBg').width(w).height(h);

        }

        window.onresize = function(){
            getSrceenWH();
        }

       $(window).resize();

        $(function(){
           getSrceenWH();

            //显示弹框
            $('#showA').click(function(){
                className = $(this).attr('class');
                $('#dialogBg').fadeIn(300);
                $('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
            });

            //关闭弹窗
            $('.claseDialogBtn').click(function(){
                $('#dialogBg').fadeOut(300,function(){
                    $('#dialog').addClass('bounceOutUp').fadeOut();
                });
            });
        });
        //       弹出框结束
    </script>

</head>
<body>
<!--头部开始-->
<jsp:include page="headerBack.jsp"/>
<!-- 导航 -->
<jsp:include page="leftBack.jsp"/>
<!--内容页头部-->
<div class="main" style="height: 1000px">
<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="two.html"><i class="icon fa fa-home"></i>主页</a></li>
            <li class="active"><i class="fa fa-pencil"></i>基本信息</li>
        </ol>
    </div>
    <div class="pull-right">
        <h2>考勤</h2>
    </div>
</div>

    <input type="hidden" id="recordIsNull" name="recordIsNull" value="${recordIsNull}"/>



<form action="${pageContext.request.contextPath}/XzAttendanceStateRecord/selectAll.emp" class="search1" id="attendanceForm" method="post">
             <div style="margin-bottom: 10px">
                  <%--<button type="button"  onclick="ToAddAttendancePage()">添加</button>--%>
             </div>

    <input type="hidden" name="empNo"  id="empNo" value="${empNo}"/>


    选择查询的月份：<input  type="month" name="selectMonth" id="selectMonth"  value="${nowData}"/>
    <button type="submit" class="one"><span class="fa fa-search"></span></button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" onclick="returnMain()" class="btn btn-primary">返回</button>
    <div id="nullDate" style="visibility:hidden;margin-left: 420px">
        <h2>本月无数据</h2>
    </div>

                <!--线型图表-->
            <div style="margin: 0 auto;height:400px;"id="echartDiv" >
                    <div style="float: left;height: 280px;width: 200px;">
                        <div style="height: 20%;"><span style="float: right">正常</span></div>
                        <div style="height: 20%;"><span style="float: right">迟到</span></div>
                        <div style="height: 20%;"><span style="float: right">早退</span></div>
                        <div style="height: 20%;"><span style="float: right">旷工</span></div>
                        <div style="height: 20%;"><span style="float: right">休息</span></div>
                    </div>
                    <div id="line"  id="myChart" style="width:822px;height:492px;float:left;margin-left: -75px;margin-top:-60px "></div>

            </div>

</form>

    <div id="yearsNullDate" style="visibility:hidden;padding-left: 420px;float: left">
        <h2>本年无数据</h2>
    </div>

    <!--柱型图表-->
    <div style="margin: 0 auto;" id="yearsechartDiv">
        <div id="pillar1" style="width:838px;height:305px;"></div>
    </div>



    <!--弹出框-->
    <div class="box">

        <div id="dialogBg"></div>
        <div id="dialog" class="animated">
            <img class="dialogIco" width="50" height="50" src="${pageContext.request.contextPath}/dist/backEnd/img/popup/ico.png" alt="" />
            <div class="dialogTop">
                <a href="javascript:;" class="claseDialogBtn">关闭</a>
            </div>
            <form action="${pageContext.request.contextPath}/XzAttendanceStateRecord/updateState.emp" method="post" id="editForm">
                <ul class="editInfos">
                    <li><label>日期：<input type="text" name="" required value="" class="ipt" id="dataShow"  readonly="true"/></label></li>
                    <li><label><font color="#ff0000">* </font>状态：
                        <%--<input type="text" name="" required value="" class="ipt" id="stateShow"/>--%>
                        <select id="stateShow" name="stateShow" value="" class="ipt" required>
                            <%--<option value="0">--请选择--</option>--%>
                            <option value="1">--休息--</option>
                            <option value="2">--旷工--</option>
                            <option value="3">--早退--</option>
                            <option value="4">--迟到--</option>
                            <option value="5">--正常--</option>
                        </select>

                    </label></li>
                    <li><input type="submit" value="确认提交" class="submitBtn" /></li>
                </ul>
                <input type="hidden" name="AttendanceStateRecordId" value="${AttendanceStateRecordId}"/>
                <input type="hidden" id="daysShow" name="daysShow" value="">
                <input type="hidden" name="empNo"  value="${empNo}">
                <input type="hidden" name="selectMonth" value="${nowData}"/>
            </form>
        </div>
    </div>


</div>
<!--图表需要调用的js包  开始-->
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/jquery-2.1.1.min.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/echarts.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/index.js"></script>
<!--图表需要调用的js包  结束-->
</body>
</html>
